<template>
  <div class="Home">
    <div class="siderBar">
      <el-scrollbar style="height: 100%" wrap-style="overflow-x:hidden;">
        <Nav :menuList="menujson.menuList" />
      </el-scrollbar>
    </div>

    <div class="main">
      <!-- 面包屑 -->
      <div class="nav">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item
            v-for="(item, index) of $route?.matched"
            :key="index"
            :to="{ path: item.path }"
            >{{ item.meta.title }}</el-breadcrumb-item
          >
        </el-breadcrumb>
      </div>
      <!-- 内容区 -->
      <div class="body">
        <router-view />
      </div>
    </div>
  </div>
</template>

<script>
import menujson from '../../../JSONdata/menu.json';
import Nav from '../../components/NavSide/index.vue';

export default {
  name: 'homeView',
  beforeRouteEnter(to, from, next) {
    next();
  },
  components: {
    Nav,
  },
  props: {},
  data() {
    return {
      menujson,
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {},
};
</script>

<style scoped lang="less">
.Home {
  display: flex;
  height: 100%;

  .siderBar {
    width: 239px;
    height: 100%;
    border-right: 1px solid black;
  }

  .main {
    width: calc(100% - 240px);
    height: 100%;
    overflow: hidden;
    box-sizing: border-box;
    .nav {
      padding: 0px 10px;
      box-sizing: border-box;
      height: 30px;
      .el-breadcrumb {
        line-height: 30px !important;
      }
    }
    .body {
      height: calc(100% - 50px);
      overflow: hidden;
      box-sizing: border-box;
      margin: 10px;
      background-color: #b8c8d024;
    }
  }
}
</style>


</style>
